<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="addPerBtnFn(1, '0')"
            >添加权限</el-button
          >
        </div>
        <!-- id 值作为每一行唯一标识 -->
        <el-table row-key="id" border :data="allPermissionList">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                v-if="row.type === 1"
                type="text"
                @click="addPerBtnFn(2, row.id)"
                >添加</el-button
              >
              <el-button type="text" @click="editPermissionFn(row.id)"
                >编辑</el-button
              >
              <el-button type="text" @click="delPermissionFn(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <per-dialog
        :PermissionList="PermissionList"
        :isEdit="isEdit"
        ref="perdialog"
        @addPerFn="addPerFn"
      />
    </div>
  </div>
</template>

<script>
import {
  getPermissionListAPI,
  addPermissionAPI,
  getPermissionDetailAPI,
  updatePermissionAPI,
  delPermissionAPI
} from '@/api'
import { transTree } from '@/utils/index'
import PerDialog from './components/perDialog.vue'
export default {
  components: {
    PerDialog
  },
  data () {
    return {
      PermissionList: [], // 扁平数组
      allPermissionList: [], // 所有权限点对象数组(树状形)
      isEdit: false // 编辑,新增弹窗区分
    }
  },
  created () {
    // 更新列表
    this.getPermissionListFn()
  },

  methods: {
    // 更新列表
    async getPermissionListFn () {
      const res = await getPermissionListAPI()
      this.PermissionList = res.data // 扁平数组
      this.allPermissionList = transTree(res.data, '0') // 树状形的
    },
    // 点击添加->权限点弹窗出现
    // type:右上角按钮传下来1,页面权限点右侧添加,传下来2(type值作为新对象的type使用)
    // pid:右上角按钮传下来'0',页面权限点右侧添加点击,传下来行id值(pid也是要给新对象pid使用)
    addPerBtnFn (type, pid) {
      this.isEdit = false
      this.$refs.perdialog.showDialog = true // 弹框出现
      this.$refs.perdialog.formData.type = type
      this.$refs.perdialog.formData.pid = pid // 表单组件弹框里组件对象,添加2个值(其他四个表当里用户输入)
    },
    // 点击添加确定
    async addPerFn (formData) {
      if (this.isEdit) {
        await updatePermissionAPI(formData)
      } else {
        const res = await addPermissionAPI(formData)
        console.log(res)
      }
      this.getPermissionListFn()
    },
    // 回显
    async editPermissionFn (perid) {
      this.isEdit = true
      const res = await getPermissionDetailAPI(perid)
      this.$refs.perdialog.formData = res.data
      this.$refs.perdialog.showDialog = true // 弹框出现
    },
    // 删除->权限点
    async delPermissionFn (perid) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除权限点,是否继续?',
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmRes === 'cancel') {
        this.$message.info('您取消了删除')
      } else {
        const res = await delPermissionAPI(perid)
        this.getPermissionListFn() // 更新列表
        this.$message.success(res.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
